<template>
  <headPage :tabsIndex="1"></headPage>
  <div class="main_box content">
    <div class="navigate_view">
      <span class="navigate_text" @click="goBack">{{ freecoursezone_zhuanqumingcheng }}</span>
      <span class="navigate_line">/</span>
      <span class="navigate_text" @click="goBack">{{
        freeprofessionalmanagement_zhuanyemingcheng
      }}</span>
      <span class="navigate_line">/</span>
      <span class="navigate_text" @click="goBack">详情</span>
      <span class="navigate_line">/</span>
      <span class="navigate_last_text" v-if="type == 1">课程作业</span>
      <span class="navigate_last_text" v-if="type == 2">开始考试</span>
      <span class="navigate_last_text" v-if="type == 3">申请实操</span>
    </div>

    <div class="material" v-loading="loading">
      <div class="assignments_title">
        <div class="title_icon"></div>
        <div class="title_text" v-if="type == 1">课程作业</div>
        <div class="title_text" v-if="type == 2">开始考试</div>
        <div class="title_text" v-if="type == 3">申请实操</div>
      </div>
      <div class="title_tip" v-if="type == 1">
        <div v-html="info.zuoyeneirong"></div>
      </div>
      <div class="title_tip" v-if="type == 2">
        <div v-html="info.kaoshineirong"></div>
      </div>
      <div class="title_tip" v-if="type == 3">
        <div v-html="info.shicaoneirong"></div>
      </div>
      <div class="material_list">
        <div class="list_item" v-for="(item, index) in dataList" :key="index">
          <img src="../../assets/course/13.png" alt="" />
          <span @click="download(item.path, item.name)">{{ item.name }}</span>
        </div>
        <!-- <div class="list_item">
          <img src="../../assets/course/14.png" alt="" />
          <span>资料2.pdf</span>
        </div> -->
      </div>
      <div class="submit_title">
        <div class="submit_title_icon"></div>
        <div class="submit_title_text">作答：</div>
      </div>
      <div class="material_content">
        <div class="table_th">
          <div class="th_item th_w_1">文件</div>
          <div class="th_item th_w_2">操作</div>
        </div>
        <div class="table_td" v-for="(item, index) in fileList" :key="index">
          <div class="td_item th_w_1">
            <!-- <img src="../../assets/course/13.png" alt="" /> -->
            <span>{{ item.name }}</span>
          </div>
          <div class="td_item td_item_active th_w_2">
            <span v-if="status == 0" @click="delFile(index)" class="delete_text"
              >删除</span
            >
            <span v-else @click="download(item.path, item.name)">点击下载</span>
          </div>
        </div>
        <div class="table_td" v-if="status == 0">
          <div class="td_item th_w_1">-</div>
          <div class="td_item th_w_2">
            <input
              class="upload_input"
              type="file"
              @change="handleFiles"
              multiple
            />
            <span class="td_item_active">上传</span>
          </div>
        </div>
      </div>

      <div class="upload_tip">
        可上传.doc、.docx、.pdf、.excel、.esp、.stp、.x_t、.model、.pro/E、.prt文件
      </div>

      <div class="submit_title" v-if="status > 0">
        <div class="submit_title_icon"></div>
        <div class="submit_title_text">老师点评结果</div>
        <div class="comment_status">
          <template v-if="dianpingInfo.dianpingzhuangtai == 1">
            <img
              class="status_icon_1"
              src="../../assets/course/15.png"
              alt=""
            />
            <div class="status_text_1">
              {{ dianpingInfo.dianpingzhuangtai_name }}
            </div>
          </template>
          <template v-if="type == 2 || type == 3">
            <template v-if="dianpingInfo.dianpingzhuangtai == 2">
              <img
                class="status_icon_1"
                src="../../assets/course/16.png"
                alt=""
              />
              <div class="status_text_2">{{ dianpingInfo.dianpingzhuangtai_name }}</div>
            </template>

            <template v-if="dianpingInfo.dianpingzhuangtai == 3">
              <img
                class="status_icon_1"
                src="../../assets/course/17.png"
                alt=""
              />
              <div class="status_text_3">{{ dianpingInfo.dianpingzhuangtai_name }}</div>
            </template>
          </template>
        </div>
      </div>
      <div class="submit_btn" @click="submit" v-if="status == 0">提交</div>
      <template v-if="status > 0 && dianpingInfo.dianpingzhuangtai > 1">
        <div class="comment_result">
          <div>
            {{ dianpingInfo.jiaoshidianping }}
          </div>
          <div
            class="comment_imgs"
            v-if="dianpingInfo.jiaoshidianpingtupian.length > 0"
          >
            <el-image
              :preview-src-list="dianpingInfo.jiaoshidianpingtupian"
              :initial-index="index"
              v-for="(url, index) in dianpingInfo.jiaoshidianpingtupian"
              :key="index"
              :src="url"
              :lazy="true"
              fit="cover"
            />
          </div>
        </div>
        <div
          class="material_content"
          v-if="dianpingInfo.jiaoshidianpingfujian.length > 0"
        >
          <div class="table_th">
            <div class="th_item th_w_1">文件</div>
            <div class="th_item th_w_2">操作</div>
          </div>
          <div
            class="table_td"
            v-for="(item, index) in dianpingInfo.jiaoshidianpingfujian"
            :key="index"
          >
            <div class="td_item th_w_1">
              <img src="../../assets/course/13.png" alt="" />
              <span>{{ item.name }}</span>
            </div>
            <div class="td_item td_item_active th_w_2">
              <span
                class="td_item_active"
                @click="download(item.path, item.name)"
                >点击下载</span
              >
            </div>
          </div>
        </div>
      </template>

      <div v-if="dianpingInfo.dianpingzhuangtai == 3 && status == 1" class="submit_btn" @click="alginSubmit">
        <span v-if="type == 2">重新考试</span>
        <span v-if="type == 3">重新申请实操</span>
      </div>
    </div>
  </div>
  <footerPage></footerPage>
  <modalText
    ref="modalPopup"
    tip="提示"
    :text="modalCOntent"
    @confirm="confirm"
  ></modalText>
</template>
    
<script name="courseAssignments" setup>
import {
  post662092c66ee3c,
  post65eee635163a8,
  post65eee73e49642,
  post65eee79d568d8,
  post662900895f3f2,
  post6628fe2f4de94,
  post6628fee05161b,
  post662905b6c1c82,
  post662906f07b09a,
  post6629075389e8f
} from "@/utils/api.js";
import headPage from "@/components/headPage.vue";
import footerPage from "@/components/footerPage.vue";
import modalText from "@/components/modalText.vue";
import { ref, reactive, onMounted, inject } from "vue";
import axios from "axios";
const injectMessage = inject("$message");
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
let type = ref(route.query.type); // 1作业  2考试  3实操
let aid = ref(route.query.aid); // 章节id
let freecoursezone_zhuanqumingcheng = ref(
  route.query.freecoursezone_zhuanqumingcheng
);
let freeprofessionalmanagement_zhuanyemingcheng = ref(
  route.query.freeprofessionalmanagement_zhuanyemingcheng
);

onMounted(() => {
  getList();
  getCommentStatus();
});
let dataList = ref([]);
let info = ref({});
function getList() {
  //查询作业列表
  if (type.value == 1) {
    post65eee635163a8({
      freecoursechapters_id: aid.value,
    })
      .then((res) => {
        // console.log(res);
        if (res.code == 1) {
          info.value = res.data;
          dataList.value = res.data.zuoyefujian;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  } else if (type.value == 2) {
    post662900895f3f2({
      freexiaokeliebiao_id: aid.value,
    })
      .then((res) => {
        // console.log(res);
        if (res.code == 1) {
          info.value = res.data;
          dataList.value = res.data.zuoyefujian;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  } else if(type.value == 3) {
    post662905b6c1c82({
      freecourselist_id: aid.value,
    })
      .then((res) => {
        console.log(res);
        if (res.code == 1) {
          info.value = res.data;
          dataList.value = res.data.zuoyefujian;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
}

// 获取老师点评状态  post65eee79d568d8
let status = ref(0);
let dianpingInfo = ref({});
let loading = ref(true);
function getCommentStatus() {
  if (type.value == 1) {
    post65eee79d568d8({
      freecoursechapters_id: aid.value,
    }).then((res) => {
      // console.log(res);
      loading.value = false;
      if (res.code == 1) {
        if (res.data) {
          status.value = 1;
          dianpingInfo.value = res.data;
          if (res.data.zuodafujian.length > 0) {
            fileList.value = res.data.zuodafujian;
          }
        } else {
          status.value = 0;
        }
      }
    });
  } else if (type.value == 2) {
    post6628fee05161b({
      freexiaokeliebiao_id: aid.value,
    }).then((res) => {
      // console.log(res);
      loading.value = false;
      if (res.code == 1) {
        if (res.data) {
          status.value = 1;
          dianpingInfo.value = res.data;
          if (res.data.zuodafujian.length > 0) {
            fileList.value = res.data.zuodafujian;
          }
        } else {
          status.value = 0;
        }
      }
    });
  } else if (type.value == 3) {
    post662906f07b09a({
      freecourselist_id: aid.value,
    }).then((res) => {
      console.log(res);
      loading.value = false;
      if (res.code == 1) {
        if (res.data) {
          status.value = 1;
          dianpingInfo.value = res.data;
          if (res.data.zuodafujian.length > 0) {
            fileList.value = res.data.zuodafujian;
          }
        } else {
          status.value = 0;
        }
      }
    });
  }
}

let modalCOntent = ref("");
let modalPopup = ref(null);
function submit() {
  if (fileList.value.length == 0) {
    if (type.value == 1) {
      injectMessage.error("请上传作业文件");
      return;
    } else if (type.value == 2) {
      injectMessage.error("请上传考试文件");
      return;
    } else if (type.value == 3) {
      injectMessage.error("请上传实操文件");
      return;
    }
  }
  if (type.value == 1) {
    modalCOntent.value = "确认提交作业吗？";
  } else if (type.value == 2) {
    modalCOntent.value = "确认提交考试吗？";
  } else if (type.value == 3) {
    modalCOntent.value = "确认提交实操吗？";
  }
  modalPopup.value.openModal();
}
// 提交作业
function confirm() {
  let arr = [];
  fileList.value.forEach((v, k) => {
    arr.push(v.url);
  });
  if (type.value == 1) {
    post65eee73e49642({
      zuodafujian: arr.join(","),
      freecourseassignments_id: info.value.aid,
    })
      .then((res) => {
        if (res.code == 1) {
          injectMessage.success("作业提交成功");
          getCommentStatus();
        }
      })
      .catch((err) => {
        console.log(err);
      });
  } else if (type.value == 2) {
    post6628fe2f4de94({
      zuodafujian: arr.join(","),
      freecourseexams_id: info.value.aid,
    })
      .then((res) => {
        if (res.code == 1) {
          injectMessage.success("考试提交成功");
          getCommentStatus();
        }
      })
      .catch((err) => {
        console.log(err);
      });
  } else if (type.value == 3) {
    post6629075389e8f({
      zuodafujian: arr.join(","),
      freecoursepractice_id: info.value.aid,
    })
      .then((res) => {
        if (res.code == 1) {
          injectMessage.success("实操提交成功");
          getCommentStatus();
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
}
function alginSubmit() {
  fileList.value = [];
  status.value = 0;
}

// 下载
function download(path, name) {
  if (!path) {
    injectMessage.error("文件获取失败，请重试");
    return;
  }
  let url = path; // 替换为您要下载的文件的URL
  let link = "";
  fetch(url)
    .then((response) => response.blob())
    .then((blob) => {
      url = window.URL.createObjectURL(blob);
      link = document.createElement("a");
      link.href = url;
      link.download = name; // 替换为您要保存的文件名
      link.click();
      link.remove();
    })
    .catch((error) => {
      console.log(error);
      injectMessage.error("文件下载失败");
    });
}

// 上传文件
let fileList = ref([]);
function handleFiles(e) {
  // 获取配置信息
  post662092c66ee3c({}).then((res) => {
    if (res.data) {
      for (let i = 0; i < e.target.files.length; i++) {
        // 执行上传
        let file = e.target.files[i];
        let filename = file.name;
        let fileSize = file.size; // b
        let ossData = res.data;
        let formData = new FormData();
        let key = ossData.dir + filename;
        let config = {
          headers: { "Content-Type": "multipart/form-data" },
        };
        // 判断上传的视频是否超过500M
        if (fileSize > 5 * 1024 * 1024) {
          injectMessage.error("文件大小不得超过5M");
          return false;
        }
        let random = Math.floor(Math.random() * 900) + 100;
        formData.append("OSSAccessKeyId", ossData.accessKeyId);
        formData.append("policy", ossData.policy);
        formData.append("signature", ossData.signature);
        formData.append("Filename", filename);
        formData.append("key", ossData.dir + random + "**" + filename);
        formData.append("success_action_status", "200");
        formData.append("file", file);

        axios.post(ossData.host, formData, config).then((res) => {
          if (res.status == 200) {
            fileList.value.push({
              name: filename,
              url: ossData.host + "/" + ossData.dir + random + "**" + filename,
            });
            console.log(fileList.value);
            // that.coverImg = ossData.host + '/' + ossData.dir + filename + '?x-oss-process=video/snapshot,t_1000,m_fast,f_jpg';
            // that.videoUrl = ossData.host + '/' + ossData.dir + filename;
          }
        });
      }
    } else {
      injectMessage.error("获取上传配置信息失败");
    }
  });
}

// 删除上传文件
function delFile(index) {
  fileList.value.splice(index, 1);
}
function goBack() {
  router.go(-1);
}
</script>
    
<style lang="scss" scoped>
.content {
  margin-top: 97px;
}
.navigate_view {
  display: flex;
  align-items: center;
  padding: 13.5px 0 12px 0;
  .navigate_text {
    font-size: 9px;
    color: #666;
    cursor: pointer;
  }
  .navigate_line {
    font-size: 9px;
    color: #bfbfbf;
    margin: 0 5px;
  }
  .navigate_last_text {
    font-size: 9px;
    color: #1f52ae;
    cursor: pointer;
  }
}
.material {
  background: #fff;
  padding: 19px 16px 20px 16px;
  margin-bottom: 20px;
  .assignments_title {
    display: flex;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
    .title_icon {
      width: 2px;
      height: 10px;
      background: #1f52ae;
      margin-right: 5px;
    }
    .title_text {
      font-size: 10px;
      font-weight: bold;
    }
  }
  .title_tip {
    margin-top: 13px;
    line-height: 12px;
    font-size: 8px;
    color: #666;
  }
  .material_list {
    .list_item {
      margin-top: 8px;
      font-size: 8px;
      display: flex;
      align-items: center;
      cursor: pointer;
      img {
        width: 8px;
        height: 8px;
        margin-right: 4px;
      }
    }
  }
  .submit_title {
    display: flex;
    align-items: center;
    margin: 20px 0 12px 0;
    .submit_title_icon {
      width: 2px;
      height: 10px;
      background: #1f52ae;
      margin-right: 5px;
    }
    .submit_title_text {
      font-size: 10px;
      font-weight: bold;
    }
    .comment_status {
      font-size: 9px;
      display: flex;
      align-items: center;
      .status_icon_1 {
        margin: 0 5px 0 10px;
        width: 9px;
        height: 9px;
      }
      .status_text_1 {
        font-weight: 500;
        color: #1f52ae;
      }
      .status_text_2 {
        font-weight: 500;
        color: #58bf71;
      }
      .status_text_3 {
        font-weight: 500;
        color: #ec695a;
      }
    }
  }
  .material_content {
    width: 410px;
    .table_th {
      background: #f6f7f9;
      border-top: 1px solid #eeeeee;
      border-left: 1px solid #eeeeee;
      border-bottom: 1px solid #eeeeee;
      display: flex;
      .th_item {
        padding: 8.5px 12px;
        // padding: 0 12px;
        border-right: 1px solid #eeeeee;
        font-size: 7px;
        color: #666;
        text-align: center;
      }
    }
    .table_td {
      border-left: 1px solid #eeeeee;
      border-bottom: 1px solid #eeeeee;
      display: flex;
      .td_item {
        padding: 8.5px 12px;
        border-right: 1px solid #eeeeee;
        font-size: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        img {
          width: 7px;
          height: 7px;
          margin-right: 4px;
        }
        .upload_input {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
          cursor: pointer;
        }
      }
      .td_item_active {
        font-size: 7px;
        color: #1f52ae;
        cursor: pointer;
      }
      .delete_text {
        font-size: 7px;
        color: #f43024;
        cursor: pointer;
      }
    }
    .th_w_1 {
      width: 222px;
    }
    .th_w_2 {
      width: 222px;
    }
    .table_td:hover {
      background: #f6f7f9;
    }
  }
  .upload_tip {
    font-size: 7px;
    color: #666;
    margin-top: 8px;
  }
  .submit_btn {
    width: 120px;
    height: 24px;
    border-radius: 3px;
    background: #1f52ae;
    border: 1px solid #1f52ae;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #fff;
    margin: 23px auto 0;
    cursor: pointer;
  }
  .comment_result {
    font-size: 8px;
    color: #666;
    margin-top: 12px;
  }
  .comment_imgs {
    margin-top: 8px;
    margin-bottom: 5px;
    .el-image {
      width: 57px !important;
      height: 57px !important;
      margin-right: 5px !important;
      border-radius: 3px !important;
      margin-bottom: 5px;
    }
  }
}
</style>
    